<script setup lang="ts">
import { formatNumber } from '~/utils/number';

const currencyStore = useCurrencyStore();
const { cryptoList } = storeToRefs(currencyStore);
const router = useRouter();
const inviteStatisticsQry = useQuery({
  queryKey: [apis.apiInviteStatistics.id],
  queryFn: () => apis.apiInviteStatistics(undefined),
});
const depositCommissionsQry = useQuery({
  queryKey: [apis.apiActivityDepositCommissions.id],
  queryFn: () => apis.apiActivityDepositCommissions(undefined),
});

const isDepositRebates = computed(() => depositCommissionsQry.data.value?.available);
const inviteStatisticsInfo = computed(() => inviteStatisticsQry.data.value?.referral_user_balance ?? undefined);
const referCode = computed(() => inviteStatisticsQry.data.value?.referral_code ?? '');
const invireUrk = computed(() =>
  inviteStatisticsQry.data.value ? (envs.isTg ? inviteStatisticsQry.data.value?.telegram_invite_url : inviteStatisticsQry.data.value?.web_invite_url) : '',
);
const commsionInfo = computed(() => inviteStatisticsQry.data.value?.commission_shares);

function openClaimFn() {
  if (!Number(inviteStatisticsInfo.value?.referral_bonus?.balance))
    return;
  globalPopups.claim.open({
    currency: [{ symbol: 'USDT', amount: bignumber(Number(inviteStatisticsInfo.value?.referral_bonus?.balance)) }],
    amount: Number(inviteStatisticsInfo.value?.referral_bonus?.balance),
    claimType: 6,
  }, { footer: null });
};
function openBalanceFn() {
  if (!Number(inviteStatisticsInfo.value?.commission_rewards?.balance))
    return;

  globalPopups.claim.open({
    currency: inviteStatisticsInfo.value?.commission_rewards.balance_details,
    amount: Number(inviteStatisticsInfo.value?.commission_rewards?.balance),
    claimType: 7,
  }, { footer: null });
}
function openInviteClaimFn() {
  if (!Number(inviteStatisticsInfo.value?.deposit_commission_rewards.balance))
    return;

  globalPopups.claim.open({
    currency: inviteStatisticsInfo.value.deposit_commission_rewards.balance_details,
    amount: Number(inviteStatisticsInfo.value?.deposit_commission_rewards?.balance),
    claimType: 13,
  }, { footer: null });
}
</script>

<template>
  <TCard :title="$t('aMQsAGnqGvd8QQj4etAoF')" bodyClass="flex flex-wrap gap-5 text-sm">
    <!-- 存款返佣 -->
    <div v-if="isDepositRebates" class="min-w-[360px] flex flex-1 flex-col items-center card-grey lt-tabletl:(min-w-300px)">
      <div class="mb-4 flex-between self-stretch">
        <div
          class="cursor-pointer text-base text-sky-400"
          @click="router.push({ name: RN.DEPOSITARIOS, query: { type: 30 } })"
        >
          {{ $t('cByJc3CuZd_9YJyxxCan0') }} <i class="i-ri:question-line text-4.5 text-sys-text-body" />
        </div>
        <span class="cursor-pointer text-3.5 text-yellow500 decoration-underline" @click="globalPopups.inviteBonus.open()">
          {{ $t('bxDkh4G4OcsDvzFnvPfG') }}
        </span>
      </div>
      <div class="mb-4 text-center">
        <div class="mb-2 text-sys-text-body">
          {{ $t('sx5fQf4CaYkEuTPtBdzg') }}
        </div>
        <div class="flex items-center justify-center">
          <TAmount :value="Number(inviteStatisticsInfo?.deposit_commission_rewards.balance ?? 0)" symbol="$" iconPos="left" format="max-dec" :decimals="4" class="text-xl text-white" />
        </div>
      </div>
      <div class="divider-h-gradual my-4" />
      <div class="mb-4 text-center">
        <div class="mb-2 text-sys-text-body">
          {{ $t('eEYhL4G_87U_1FkZCj7Ih') }}
        </div>
        <div class="flex items-center justify-center">
          <i class="i-local:lock-fill mr-2 text-6" />
          <span class="text-4.5">
            ${{ bignumber(formatNumber(inviteStatisticsInfo?.deposit_commission_rewards?.locked_balance || 0, 2)).toFormat() }}
          </span>
        </div>
      </div>
      <AButton
        v-if="Number(inviteStatisticsInfo?.deposit_commission_rewards?.balance ?? 0)"
        class="ant-cover__Button-3d-primary ant-cover__Button-3d-blue mt-auto max-w-75 w-full"
        type="primary" block
        @click="openInviteClaimFn"
      >
        {{ $t('sx5fQf4CaYkEuTPtBdzg') }}
      </AButton>
      <AButton
        v-else
        class="ant-cover__Button-3d-primary ant-cover__Button-3d-blue mt-auto max-w-75 w-full"
        type="primary"
        @click="globalPopups.invitedBrokerageShare.open()"
      >
        {{ $t('ruix7Lrm4wvh9gM_4_4S') }}
      </AButton>
    </div>

    <!-- 推荐奖金 -->
    <div class="min-w-[360px] flex flex-1 flex-col items-center card-grey lt-tabletl:(min-w-300px)">
      <div class="mb-4 flex-between self-stretch">
        <div
          class="cursor-pointer text-base text-sky-400"
          @click="globalPopups.referInfo.open({ code: referCode, url: invireUrk })"
        >
          {{ $t('uhX3J_1qgsPGtiEyTbu0') }}  <i class="i-ri:question-line text-4.5 text-sys-text-body" />
        </div>
        <span class="cursor-pointer text-3.5 text-yellow500 decoration-underline" @click="globalPopups.bonusInfo.open({ typeId: 2 })">
          {{ $t('bxDkh4G4OcsDvzFnvPfG') }}
        </span>
      </div>
      <div class="text-center">
        <div class="mb-2 text-sys-text-body">
          {{ $t('hrxCsTjCyDx8huolUzHb') }}
        </div>
        <ATooltip>
          <template #title>
            <TAmount class="text-white" :value="inviteStatisticsInfo?.referral_bonus.balance" :decimals="8" symbol="$" format="fixed-dec" colored="inherit" iconPos="left" />
          </template>
          <TAmount class="text-xl" symbol="$" :value="inviteStatisticsInfo?.referral_bonus.balance" format="max-dec" :decimals="4" iconPos="left" />
        </ATooltip>
      </div>

      <div class="divider-h-gradual my-5" />

      <div class="mb-4 text-center">
        <div class="mb-2 text-sys-text-body">
          {{ $t('eEYhL4G_87U_1FkZCj7Ih') }}
        </div>
        <div class="flex items-center justify-center">
          <i class="i-local:lock-fill mr-2 text-6" />
          <span class="text-4.5">
            ${{ bignumber(formatNumber(inviteStatisticsInfo?.referral_bonus.locked_balance || 0, 2)).toFormat() }}
          </span>
        </div>
      </div>
      <AButton
        class="ant-cover__Button-3d-primary ant-cover__Button-3d-blue mt-auto max-w-75 w-full"
        type="primary" block
        :disabled="!Number(inviteStatisticsInfo?.referral_bonus?.balance)"
        @click="openClaimFn"
      >
        {{ $t('sx5fQf4CaYkEuTPtBdzg') }}
      </AButton>
    </div>

    <!-- 佣金奖励 -->
    <div class="bonus min-w-[360px] flex-1 card-grey lt-tabletl:(min-w-300px)">
      <div class="head self-stretch">
        <div
          class="cursor-pointer text-base text-green-400"
          @click="globalPopups.rewardInfo.open({ code: referCode, url: invireUrk, info: commsionInfo });"
        >
          {{ $t('hzy2h5iwLZaTxQvd24') }}
          <i class="i-ri:question-line text-4.5 text-sys-text-body" />
        </div>
        <span
          class="cursor-pointer text-3.5 text-yellow500 decoration-underline" @click="globalPopups.bonusInfo.open({ typeId: 1 })"
        >{{ $t('bxDkh4G4OcsDvzFnvPfG') }}</span>
      </div>
      <div class="text-center">
        <div class="mb-2 text-sys-text-body">
          {{ $t('hrxCsTjCyDx8huolUzHb') }}
        </div>
        <ATooltip>
          <template #title>
            <TAmount :value="inviteStatisticsInfo?.commission_rewards.balance" :decimals="8" symbol="$" format="fixed-dec" colored="inherit" iconPos="left" />
          </template>
          <TAmount class="text-xl" symbol="$" :value="inviteStatisticsInfo?.commission_rewards.balance" format="max-dec" :decimals="4" iconPos="left" />
        </ATooltip>
      </div>

      <div class="divider-h-gradual my-5" />

      <div class="mb-4">
        <div class="flex items-center justify-center text-2xl">
          <template v-for="item in cryptoList" :key="item.currency">
            <img
              v-if="Number(item?.usd_price) > 0 && item?.allow_withdraw" :key="item.currency"
              class="block h-[1em] w-[1em] b-(3 sys-layer-a solid) rounded-full bg-sys-layer-a -ml-[0.3em] first:ml-0"
              :src="$store.app.joinCdnPath(item.logo)"
            >
          </template>
        </div>
        <div class="mt-2 flex cursor-pointer items-center justify-center text-sys-text-body" @click="openBalanceFn">
          <span class="text-sm">{{ $t('ahAwa6PQramg7UluU0qN') }}</span>
          <i class="i-ion:ios-arrow-forward ml-1" />
        </div>
      </div>
      <AButton
        class="ant-cover__Button-3d-primary ant-cover__Button-3d-green max-w-75 w-full"
        type="primary" block
        :disabled="!Number(inviteStatisticsInfo?.commission_rewards.balance)"
        @click="openBalanceFn"
      >
        {{ $t('tatRo9JcZaWu89N49LYnX') }}
      </AButton>
    </div>
  </TCard>
</template>

<style scoped lang="scss">
.card-grey {
  --uno: 'flex justify-evenly items-center flex-col p-6 lt-tabletl:p-3';
  .head {
    --uno: 'flex-between mb-4 ';
  }
  .core,
  .foot {
    --uno: 'flex-center flex-col';
  }
}
</style>
